<script setup lang="ts">
import { ref } from 'vue';

defineOptions({ name: 'StatusCards' });

// 模拟状态数据
const statusData = ref([
  {
    title: '故障预测',
    value: '3个',
    description: '潜在系统风险',
    icon: 'mdi-alert-triangle',
    color: 'warning',
    trend: '+2 较昨日'
  },
  {
    title: '异常检测',
    value: '12个',
    description: '需处理事件',
    icon: 'mdi-bell-ring',
    color: 'danger',
    trend: '-4 较昨日'
  },
  {
    title: 'AI模型准确性',
    value: '98.7%',
    description: '故障识别率',
    icon: 'mdi-check-circle',
    color: 'success',
    trend: '+0.3% 较昨日'
  }
]);
</script>

<template>
  <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
    <NGi span="24 s:24 m:8" v-for="item in statusData" :key="item.title">
      <NCard
        :bordered="false"
        class="card-wrapper h-full"
        :class="`hover:shadow-lg transition-shadow duration-300 bg-${item.color}/5 border-l-4 border-${item.color}`"
      >
        <div class="flex items-start justify-between">
          <div>
            <h3 class="text-lg font-medium text-gray-500">{{ item.title }}</h3>
            <div class="flex items-end gap-2 mt-2">
              <span :class="`text-2xl font-bold text-${item.color}`">{{ item.value }}</span>
              <span class="text-sm text-gray-500">{{ item.description }}</span>
            </div>
            <p class="mt-2 text-sm text-gray-500 flex items-center">
              <SvgIcon
                :icon="item.trend.includes('+') ? 'mdi-arrow-up' : 'mdi-arrow-down'"
                :class="item.trend.includes('+') ? 'text-success mr-1' : 'text-danger mr-1'"
                size="14"
              />
              {{ item.trend }}
            </p>
          </div>
          <div :class="`p-3 rounded-full bg-${item.color}/10 text-${item.color}`">
            <SvgIcon :icon="item.icon" size="24" />
          </div>
        </div>
      </NCard>
    </NGi>
  </NGrid>
</template>

<style scoped></style>